<script setup lang="ts"></script>

<template>
  <nav class="mt-3">
    <ul
      class="flex flex-col *:block *:h-14 *:pt-3 *:text-c_gray *:duration-200 hover:*:bg-c_litegray hover:*:text-c_lilu"
    >
      <li>
        <router-link
          class="flex h-full w-full bg-dashboardG bg-[length:24px_24px] bg-no-repeat pt-1 hover:bg-dashboardP lg:bg-[1rem_3px] lg:pl-12 xl:bg-[2rem_3px] xl:pl-16"
          to="/SoViBoard"
          >SoViBoard</router-link
        >
      </li>
      <li>
        <router-link
          class="flex h-full w-full bg-sportG bg-[length:24px_24px] bg-no-repeat pr-2 pt-1 hover:bg-sportP lg:bg-[1rem_3px] lg:pl-12 xl:bg-[2rem_3px] xl:pl-16"
          to="/SportsRound"
        >
          SportsRound</router-link
        >
      </li>
      <li>
        <router-link
          class="flex h-full w-full bg-cookingG bg-[length:24px_24px] bg-no-repeat pt-1 hover:bg-cookingP lg:bg-[1rem_3px] lg:pl-12 xl:bg-[2rem_3px] xl:pl-16"
          to="/WTC"
        >
          WTC?!</router-link
        >
      </li>
      <li>
        <router-link
          class="flex h-full w-full bg-codingG bg-[length:24px_24px] bg-no-repeat pt-1 hover:bg-codingP lg:bg-[1rem_3px] lg:pl-12 xl:bg-[2rem_3px] xl:pl-16"
          to="/Coding"
        >
          Coding</router-link
        >
      </li>
    </ul>
  </nav>
</template>
